<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="房产编号" prop="projectNumber">
            <el-input
              v-model="form.projectNumber"
              placeholder="请填写房产编号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产性质" prop="projectProperty">
            <el-select
              v-model="form.projectProperty"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in projectPropertyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产类型" prop="buildingType">
            <el-select
              v-model="form.buildingType"
              placeholder="请选择"
              @change="getSysProjectType()"
              style="width: 100%"
            >
              <el-option
                v-for="item in proBuildTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产楼号/区域" prop="projectTypeId">
            <el-select
              v-model="form.projectTypeId"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in projectUnitList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="楼层" prop="projectFloorNumber">
            <el-input
              :disabled="
                form.buildingType === 'exhibition' ||
                form.buildingType === 'exclusive_shop'
              "
              v-model="form.projectFloorNumber"
              type="number"
              placeholder="请填写楼层"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房号" prop="projectName">
            <el-input
              v-model="form.projectName"
              placeholder="请填写房号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="面积(㎡):" prop="projectArea">
            <el-input
              v-model="form.projectArea"
              type="number"
              placeholder="请填写面积"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产状态" prop="projectStatus">
            <el-select
              v-model="form.projectStatus"
              placeholder=""
              style="width: 100%"
            >
              <el-option
                v-for="item in proStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--<el-col :span="12">
          <el-form-item label="关联合同">
            <el-select v-model="form.ctContract.id" placeholder="" @change="getChangeStatus()" style="width:100%;">
              <el-option v-for="item in proContractList"
                         :key="item.id"
                         :label="item.contractNumber"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit">提 交</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getObj,
  addObj,
  putObj,
  getProjectType,
  getSysProjectType,
  getProjectStatus,
  getProjectpProperty,
  getModifyLog,
  getContractList,
} from "@/api/market/estate/rmproject";
import { fetchList } from "@/api/market/contract/person";
import { getDicType } from "@/api/common";

export default {
  name: "Menu",
  data() {
    return {
      title: "",
      dialogWidth: "40%",
      method: "",
      visible: false,
      loading: false,
      disabled: true,
      proStatusList: [],
      projectPropertyList: [],
      proBuildTypeList: [], //房产类型绑定数据
      projectUnitList: [], //房产楼号/区域绑定数据
      proContractList: [], //获取关联合同数据
      contractId: "",
      form: {
        id: "",
        projectNumber: "", //房产编号333
        projectProperty: null, //房产性质333
        buildingType: null, //房产类型333
        projectTypeId: null, //房产楼号/区域
        projectFloorNumber: 0,//333
        projectName: "",//3333
        projectArea: 0,//3333
        projectStatus: null,
        ctContract: {
          id: "",
        }, //关联合同
      },
      // 表单校验
      rules: {
        projectNumber: [
          { required: true, message: "房产编号不能为空", trigger: "blur" },
        ],
        projectProperty: [
          { required: true, message: "房产性质不能为空", trigger: "blur" },
        ],
        buildingType: [
          { required: true, message: "房产类型不能为空", trigger: "blur" },
        ],
        projectTypeId: [
          { required: true, message: "房产楼号/区域不能为空", trigger: "blur" },
        ],
        /*   projectFloorNumber: [
             { required: true, message: "楼层不能为空", trigger: "blur" }
           ],*/
        projectName: [
          { required: true, message: "房号不能为空", trigger: "blur" },
        ],
        projectArea: [
          { required: true, message: "面积不能为空", trigger: "blur" },
        ],
        projectStatus: [
          { required: true, message: "房产状态不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    //房产状态
    getProjectStatus().then((response) => {
      if (response.data != null) {
        this.proStatusList = response.data.data;
        this.form.projectStatus = this.proStatusList[1].value;
      }
      console.log("");
    });

    //房产性质
    getProjectpProperty().then((response) => {
      if (response.data != null) {
        this.projectPropertyList = response.data.data;
      }
    });

    //获取房产类型
    getProjectType().then((response) => {
      if (response.data != null) {
        this.proBuildTypeList = response.data.data;
      }
    });

    //获取关联合同数据
    getContractList().then((response) => {
      if (response.data != null) {
        this.proContractList = response.data.data;
      }
    });
  },
  methods: {
    init(method, id) {
      if (id != null) {
        this.form.id = id;
      }
      if (method === "add") {
        this.title = `新增房产`;
      } else if (method === "edit") {
        this.title = "修改房产";
      } else if (method === "view") {
        this.title = "查看房产";
      }
      this.visible = true;

      this.$nextTick(() => {
        this.$refs.dataForm.resetFields();
        if (id != "") {
          getObj(id).then((response) => {
            var contract = { id: "" };
            if (response.data.data.ctContract == null) {
              response.data.data.ctContract = contract;
            } else {
              contract.id = response.data.data.ctContract.id;
              response.data.data.ctContract = contract;
            }
            //alert(JSON.stringify(response.data.data.ctContract));
            this.form = response.data.data;
            this.form.projectProperty = (this.form.projectProperty || "") + "";
            this.form.projectStatus = (this.form.projectStatus || "") + "";
            //修改时加载数据房产数据
            this.getSysProjectType();
          });
        }
      });
    },
    getChangeStatus: function () {
      if (this.form.ctContract != null) {
        this.form.projectStatus = this.proStatusList[3].value;
      }
    },
    //根据房产类型值改变事件
    getSysProjectType: function () {
      if (this.form.buildingType != "") {
        // getSysProjectType(this.form.buildingType).then(response => {
        //   if (response.data != null) {
        //     this.projectUnitList = response.data.data;
        //   }
        // })
        getDicType(this.form.buildingType).then((response) => {
          if (response.data != null) {
            this.projectUnitList = response.data.data;
          }
        });
      }
    },
    // 表单提交
    dataFormSubmit() {
      console.log(this.form);
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            putObj(this.form).then((data) => {
              if (data.data.code == 0) {
                this.$message.success("修改成功");
                this.visible = false;
                this.$emit("refreshDataList");
              } else if (data.data.code == 2) {
                this.$alert(data.data.data, "错误提示", {
                  confirmButtonText: "确定",
                });
              }
            });
          } else {
            addObj(this.form).then((data) => {
              if (data.data.code == 0) {
                this.$message.success("添加成功");
                this.visible = false;
                this.$emit("refreshDataList");
              } else if (data.data.code == 2) {
                this.$alert(data.data.data, "错误提示", {
                  confirmButtonText: "确定",
                });
              }
            });
          }
        }
      });
    },
  },
};
</script>
